<template>
  <view class="form-input" :class="inputClass">
    <!-- 输入框标签 -->
    <view v-if="label" class="form-input__label">
      <text class="label-text">{{ label }}</text>
      <text v-if="required" class="required-mark">*</text>
    </view>

    <!-- 输入框容器 -->
    <view class="form-input__wrapper" :style="wrapperStyle">
      <!-- 前置图标 -->
      <view v-if="prefixIcon" class="form-input__prefix">
        <text class="prefix-icon">{{ prefixIcon }}</text>
      </view>

      <!-- 输入框 -->
      <input
        :value="modelValue"
        :type="inputType"
        :placeholder="placeholder"
        :disabled="disabled"
        :maxlength="maxlength"
        :class="['form-input__inner', inputInnerClass]"
        :style="inputStyle"
        @input="handleInput"
        @blur="handleBlur"
        @focus="handleFocus"
        @confirm="handleConfirm"
      />

      <!-- 后置图标/操作区 -->
      <view class="form-input__suffix">
        <!-- 清除按钮 -->
        <view
          v-if="clearable && modelValue && !disabled"
          class="form-input__clear"
          @click="handleClear"
        >
          <text class="clear-icon">✕</text>
        </view>

        <!-- 密码显示切换 -->
        <view
          v-if="type === 'password' && showPasswordToggle"
          class="form-input__password"
          @click="togglePasswordVisibility"
        >
          <text class="password-icon">{{ showPassword ? '👁' : '👁‍🗨' }}</text>
        </view>

        <!-- 后置图标 -->
        <view v-if="suffixIcon" class="form-input__suffix-icon">
          <text class="suffix-icon">{{ suffixIcon }}</text>
        </view>
      </view>
    </view>

    <!-- 帮助文本 -->
    <view v-if="helpText" class="form-input__help">
      <text class="help-text">{{ helpText }}</text>
    </view>

    <!-- 错误信息 -->
    <view v-if="error" class="form-input__error">
      <text class="error-text">{{ error }}</text>
    </view>

    <!-- 字数统计 -->
    <view v-if="showWordCount && maxlength" class="form-input__count">
      <text class="count-text">{{ modelValue?.length || 0 }}/{{ maxlength }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// Props
interface Props {
  modelValue?: string | number
  type?: 'text' | 'password' | 'number' | 'idcard' | 'digit' | 'tel'
  label?: string
  placeholder?: string
  disabled?: boolean
  clearable?: boolean
  showPasswordToggle?: boolean
  showWordCount?: boolean
  required?: boolean
  error?: string
  helpText?: string
  prefixIcon?: string
  suffixIcon?: string
  maxlength?: number
  size?: 'small' | 'medium' | 'large'
  variant?: 'outlined' | 'filled' | 'underlined'
  align?: 'left' | 'center' | 'right'
  backgroundColor?: string
  borderColor?: string
  textColor?: string
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  type: 'text',
  placeholder: '',
  disabled: false,
  clearable: false,
  showPasswordToggle: false,
  showWordCount: false,
  required: false,
  error: '',
  helpText: '',
  maxlength: undefined,
  size: 'medium',
  variant: 'outlined',
  align: 'left',
  customClass: ''
})

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: string | number]
  input: [value: string | number]
  blur: [event: any]
  focus: [event: any]
  confirm: [event: any]
  clear: []
}>()

// 响应式数据
const showPassword = ref(false)
const isFocused = ref(false)

// 计算属性
const inputType = computed(() => {
  if (props.type === 'password') {
    return showPassword.value ? 'text' : 'password'
  }
  return props.type
})

const inputClass = computed(() => {
  return [
    `form-input--${props.size}`,
    `form-input--${props.variant}`,
    {
      'form-input--disabled': props.disabled,
      'form-input--error': props.error,
      'form-input--focused': isFocused.value
    },
    props.customClass
  ]
})

const inputInnerClass = computed(() => {
  return [
    `form-input__inner--${props.align}`
  ]
})

const wrapperStyle = computed(() => {
  const style: any = {}

  if (props.backgroundColor) {
    style.backgroundColor = props.backgroundColor
  }

  if (props.borderColor && !props.error) {
    style.borderColor = props.borderColor
  }

  if (props.error) {
    style.borderColor = '#ff4757'
  }

  return style
})

const inputStyle = computed(() => {
  const style: any = {}

  if (props.textColor) {
    style.color = props.textColor
  }

  return style
})

// 方法
/**
 * 处理输入
 */
const handleInput = (e: any) => {
  let value = e.detail.value

  // 数字类型处理
  if (props.type === 'number') {
    value = value.replace(/[^\d.-]/g, '')
  }

  emit('update:modelValue', value)
  emit('input', value)
}

/**
 * 处理焦点获取
 */
const handleFocus = (e: any) => {
  isFocused.value = true
  emit('focus', e)
}

/**
 * 处理焦点失去
 */
const handleBlur = (e: any) => {
  isFocused.value = false
  emit('blur', e)
}

/**
 * 处理确认
 */
const handleConfirm = (e: any) => {
  emit('confirm', e)
}

/**
 * 清除输入
 */
const handleClear = () => {
  emit('update:modelValue', '')
  emit('clear')
}

/**
 * 切换密码可见性
 */
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}
</script>

<style lang="scss" scoped>
.form-input {
  width: 100%;

  &__label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .label-text {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }

    .required-mark {
      color: #ff4757;
      margin-left: 2px;
      font-size: 14px;
    }
  }

  &__wrapper {
    display: flex;
    align-items: center;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e1e8ed;
    transition: all 0.3s ease;
    overflow: hidden;

    &:focus-within {
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
    }
  }

  &__prefix,
  &__suffix {
    display: flex;
    align-items: center;
    padding: 0 12px;
  }

  &__prefix {
    border-right: 1px solid #f0f0f0;

    .prefix-icon {
      font-size: 16px;
      color: #999;
    }
  }

  &__suffix {
    border-left: 1px solid #f0f0f0;
    gap: 8px;
  }

  &__clear,
  &__password,
  &__suffix-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:active {
      background: #f0f0f0;
    }
  }

  &__clear {
    .clear-icon {
      font-size: 14px;
      color: #999;
    }
  }

  &__password {
    .password-icon {
      font-size: 16px;
      color: #999;
    }
  }

  &__suffix-icon {
    .suffix-icon {
      font-size: 16px;
      color: #999;
    }
  }

  &__inner {
    flex: 1;
    height: 40px;
    font-size: 14px;
    color: #333;
    background: transparent;
    border: none;
    outline: none;
    padding: 0 12px;

    &::placeholder {
      color: #999;
    }

    &:disabled {
      color: #999;
      cursor: not-allowed;
    }

    &--left {
      text-align: left;
    }

    &--center {
      text-align: center;
    }

    &--right {
      text-align: right;
    }
  }

  &__help {
    margin-top: 4px;

    .help-text {
      font-size: 12px;
      color: #666;
      line-height: 1.4;
    }
  }

  &__error {
    margin-top: 4px;

    .error-text {
      font-size: 12px;
      color: #ff4757;
      line-height: 1.4;
    }
  }

  &__count {
    margin-top: 4px;
    text-align: right;

    .count-text {
      font-size: 12px;
      color: #999;
    }
  }

  // 尺寸变体
  &--small {
    .form-input__wrapper {
      min-height: 32px;
    }

    .form-input__inner {
      height: 30px;
      font-size: 12px;
    }

    .form-input__prefix,
    .form-input__suffix {
      padding: 0 8px;
    }

    .form-input__clear,
    .form-input__password,
    .form-input__suffix-icon {
      width: 24px;
      height: 24px;
    }
  }

  &--medium {
    .form-input__wrapper {
      min-height: 40px;
    }

    .form-input__inner {
      height: 38px;
    }
  }

  &--large {
    .form-input__wrapper {
      min-height: 48px;
    }

    .form-input__inner {
      height: 46px;
      font-size: 16px;
    }
  }

  // 样式变体
  &--outlined {
    .form-input__wrapper {
      border: 1px solid #e1e8ed;
      border-radius: 8px;
    }
  }

  &--filled {
    .form-input__wrapper {
      border: 1px solid transparent;
      border-radius: 8px;
      background: #f8f9fa;

      &:focus-within {
        background: #ffffff;
        border-color: #1890ff;
      }
    }
  }

  &--underlined {
    .form-input__wrapper {
      border: none;
      border-bottom: 1px solid #e1e8ed;
      border-radius: 0;
      background: transparent;

      &:focus-within {
        border-bottom-color: #1890ff;
        box-shadow: none;
      }
    }
  }

  // 状态样式
  &--disabled {
    .form-input__wrapper {
      background: #f5f5f5;
      border-color: #e1e8ed;
      cursor: not-allowed;
    }

    .form-input__inner {
      color: #999;
    }
  }

  &--error {
    .form-input__wrapper {
      border-color: #ff4757;

      &:focus-within {
        border-color: #ff4757;
        box-shadow: 0 0 0 2px rgba(255, 71, 87, 0.1);
      }
    }
  }

  &--focused {
    .form-input__wrapper {
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
    }
  }
}

// 动画效果
.form-input__wrapper {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input__clear,
.form-input__password,
.form-input__suffix-icon {
  transition: all 0.2s ease;
}
</style>